<!-- @@@title: Imgbot - Automatic image compression@@@ -->

<nav class="navbar navbar-light bg-white navbar-expand-lg fixed-top border-bottom">
  <a class="navbar-brand" href="/">
    <img width="135" alt="Imgbot" src="/images/imgbot.svg" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto align-items-center">
      <li class="nav-item">
        <a class="nav-link mb-0" href="/docs">Documentation</a>
      </li>
      <li class="nav-item">
        <a class="nav-link mb-0" href="/app">Log in</a>
      </li>
      <li class="nav-item ml-3">
        <a class="btn btn-primary" href="https://github.com/marketplace/imgbot">Try for free</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-hero container-ties">
  <div class="container">
    <div class="row">
      <div class="col">
        <h1>Relax while Imgbot optimizes your images</h1>
      </div>
    </div>
    <div class="row justify-content-md-center">
      <div class="col col-md-8">
        <h3>Don’t spend another second worrying about compressing your images. Install Imgbot into your GitHub projects,
          and focus on your application.</h3>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col">
        <a class="btn btn-primary" href="https://github.com/marketplace/imgbot">Try for free</a>
        <small class="mt-3">Always free for open source projects</small>
      </div>
    </div>
    <div class="row justify-content-center mt-5">
      <div class="col-lg-8 mt-3">
        <img alt="An Imgbot pull request example on GitHub" class="pr" src="/images/pr1.png">
      </div>
    </div>
  </div>
</div>

<div class="container-spaced container-light">
  <div class="container container-howitworks" aria-label="How it works">
    <div class="row text-center mt-5">
      <div class="col-sm">
        <a href="https://github.com/marketplace/imgbot"><img alt="" src="/images/icon.svg" width="100" /></a>
        <h3>1. Install</h3>
        <p>
          Install Imgbot from the GitHub marketplace into your projects with the
          click of a button.
        </p>
      </div>
      <div class="col-sm">
        <img alt="" src="/images/merge.svg" width="70" />
        <h3>2. Merge</h3>
        <p>
          Imgbot will send you your first pull request optimizing all of the
          images that it can find.
        </p>
      </div>
      <div class="col-sm">
        <img alt="" src="/images/flame.svg" width="70" />
        <h3>3. Win</h3>
        <p>
          Imgbot watches for new images in your repository and opens more pull
          requests.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="container-spaced">
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <h2>Why should I optimize my images?</h2>
        <p>
          When you’re shipping code and hitting deadlines, it’s easy to forget about optimizing your images. But the
          truth is if you don’t optimize your images, <b>you are losing out</b>.
        </p>
        <p>
          Web pages with optimized images load faster. Faster pages have higher conversion rates, lower bounce rates,
          and happier users. And of course, smaller images reduce bandwidth costs for you and your visitors.
        </p>
      </div>
      <div class="col-md offset-md-1">
        <img src="/images/devices.svg" alt="" />
      </div>
    </div>
  </div>
</div>

<div class="container-spaced container-light">
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <h2>Why should I use Imgbot?</h2>
        <p>
          Setting up and configuring your own tools can be a complicated and lengthy process. That means you are not
          focusing on shipping your next big update. With just a few clicks, you can install Imgbot and permanently
          solve your image optimization problems.
        </p>
        <p>
          Imgbot is verified by GitHub which mean it has gone through extensive <a
            href="https://developer.github.com/marketplace/getting-started/security-review-process/">security
            reviews</a> to make sure Imgbot is
          reliable and your data is safe. You can trust Imgbot.
        </p>
      </div>
      <div class="col-md offset-md-1">
        <img src="/images/stats.svg" alt="" />
      </div>
    </div>
  </div>
</div>

<div class="container-spaced">
  <div class="container text-center">
    <div class="row">
      <div class="col">
        <h2>You're in good company</h2>
      </div>
    </div>
    <div class="row customer-row">
      <img src="/images/logos/google.jpg" alt="Google" />
      <img src="/images/logos/ibm.png" alt="IBM" />
      <img src="/images/logos/magento.png" alt="Magento" />
      <img src="/images/logos/freecodecamp.png" alt="Free Code Camp" />
      <img src="/images/logos/intel.png" alt="Intel" />
      <img src="/images/logos/storybook.png" alt="Storybook" />
      <img src="/images/logos/ant.png" alt="Ant Design" />
      <img src="/images/logos/minted.png" alt="Minted" />
      <img src="/images/logos/istio.png" alt="Istio" />
      <img src="/images/logos/nuxt.png" alt="Nuxt" />
      <img src="/images/logos/gumroad.png" alt="Gumroad" />
      <img src="/images/logos/electron.png" alt="Electron" />
      <img src="/images/logos/nextcloud.png" alt="Nextcloud" />
      <img src="/images/logos/jenkins.png" alt="Jenkins" />
      <img src="/images/logos/fossasia.png" alt="Fossasia" />
      <img src="/images/logos/fleetio.png" alt="FleetIO" />
      <img src="/images/logos/workelo.png" alt="Workelo" />
      <img src="/images/logos/tutory.png" alt="Tutory" />
      <img src="/images/logos/agflow.png" alt="AG Flow" />
      <img src="/images/logos/wave.png" alt="Wave" />
      <img src="/images/logos/prettier.png" alt="Prettier" />
      <img src="/images/logos/antfinancial.jpg" alt="Ant Financial" />
      <img src="/images/logos/monica.png" alt="Monica HQ" />
      <img src="/images/logos/testinglibrary.png" alt="Testing Library" />
      <img src="/images/logos/palmer.png" alt="Palmer" />
      <img src="/images/logos/formik.png" alt="Formik" />
      <img src="/images/logos/weblate.png" alt="Weblate" />
      <img src="/images/logos/home-assistant.png" alt="Home Assistant " />
      <img src="/images/logos/seedlegals.png" alt="Seed Legals" />
      <img src="/images/logos/cumulus.png" alt="Cumulus" />
    </div>
  </div>
</div>

<div class="container-spaced container-light container-hero">
  <div class="container text-center">
    <div class="row">
      <div class="col">
        <h2>See why more than 200,000 projects rely on Imgbot</h2>
      </div>
    </div>
    <div class="row mt-4 justify-content-md-center">
      <div class="col col-md-8">
        <h3 class="live-text"><span class="placeholder">Optimize your images from now until forever.</span></h3>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col">
        <a class="btn btn-primary" href="https://github.com/marketplace/imgbot">Try for free</a>
      </div>
    </div>
  </div>
</div>

<footer>
  <div class="container pt-5">
    <div class="row justify-content-center">
      <div class="col-lg-3">
        <h3>Imgbot</h3>
        <ul>
          <li><a href="/app">Log in</a></li>
          <li>
            <a href="https://github.com/marketplace/imgbot#pricing-and-setup">Pricing</a>
          </li>
          <li>
            <a href="https://github.com/marketplace/imgbot">Install</a>
          </li>
          <li>
            <a href="/info">Request more info</a>
          </li>
        </ul>
      </div>
      <div class="col-lg-3">
        <h3>Help</h3>
        <ul>
          <li>
            <a href="https://github.com/dabutvin/Imgbot/issues">Open an issue</a>
          </li>
          <li><a href="mailto:help@imgbot.net">Contact support</a></li>
          <li><a href="/docs">Documentation</a></li>
          <li>
            <a href="https://github.com/dabutvin/Imgbot">Read the code</a>
          </li>
        </ul>
      </div>
      <div class="col-lg-3">
        <h3>Policies</h3>
        <ul>
          <li><a href="/privacy">Privacy policy</a></li>
          <li><a href="/terms">Terms of Service</a></li>
          <li><a href="/incident-response">Incident Response</a></li>
          <li>
            <a href="/vulnerability-management">Vulnerability Management</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-11 col-lg offset-lg-1">
          <p>
              <img alt="" src="/images/128x128_circle.png" width="30" />
              Imgbot &copy; 2017-2022
            </p>
      </div>
      <div class="col-11 col-lg">
        <p>Design by <a href="http://eliselivingston.design">Elise Livingston</a>
        </p>
      </div>
      <div class="col-11 col-lg">
          <p>
              Illustrations by <a href="http://undraw.co">undraw.co</a>
            </p>
      </div>
    </div>
  </div>
</footer>

<script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.github.com/search/issues?o=desc&p=3&q=imgbot%20is:pr&sort=created');
  xhr.onload = function () {
    if (xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      var index = -1;

      var rotate = function () {
        var item, link, percentMatch;
        do {
          index++;
          if (index >= data.items.length) return;

          item = data.items[index];
          link = item.html_url;
          percentMatch = item.body.match(/Your image file size has been reduced by \*\*(.*)%\*\*/);
        } while (!percentMatch || !percentMatch.length > 1);

        var percent = percentMatch[1];
        var handle = item.html_url.match(/https:\/\/github.com\/(.+?)\//)[1];

        $(".live-text .placeholder").remove();
        $(".live-text").append(
          "<a target='_blank' href='" + link + "'>Imgbot just optimized images by <b class='pad'>" + percent + "%</b> for @" + handle + " <span class='ml-1'>🎉</span></a>");
      };

      rotate();
      setInterval(rotate, 7000);
    }
  }
  xhr.send();
</script>
